<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>login</title>
<link rel="stylesheet" type="text/css" href="../../css/index.css" />

<style media="screen">
	html,body{background: #FFFFFF;}
	input::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
	input::-moz-placeholder{color: #BBBBBB;font-size: 14px;}
	.info-box{padding: 30px 15px;box-sizing: border-box;width: 100%;flex-direction: column;position: fixed;top: 0;left: 0;right: 0;bottom: 0;}

	.title{font-size: 30px;padding: 20px 0 40px 0;box-sizing: border-box;flex-shrink: 0;font-weight: bold;}
	.info-one{height: 50px;align-items:center;flex-shrink: 0;margin-bottom: 10px;margin-left: 10px;margin-right: 10px;}
	.info-one .input-box{overflow: hidden;}
	.info-one input{padding: 10px;box-sizing: border-box;box-sizing: border-box;}
	.info-one .code{width: auto;height: 28px;background: #ffffff;text-align: center;line-height: 28px;font-size: 12px;color: #FF9502;flex-shrink: 0;}
	.info-one .lf{line-height: 50px;}
	.login-btn{width: 100%;height:45px;flex-shrink: 0;background:#FF9502;opacity: 0.5;border-radius:4px;text-align: center;line-height: 45px;color: #FFFFFF;font-size: 18px;margin-top: 30px;}
	.login-btn.on{background:#FF9502;opacity: 1;}

	/*区号样式*/
	.option {width: 40px;position: relative;}
	.option select{appearance: none;-webkit-appearance: none;-moz-appearance: none;}
	.option:after{content: ""; width: 7px;height: 5px;background: url(../../image/login/down.png) no-repeat center;background-size:7px 5px;position: absolute;right: 4px;top: 44%;pointer-events: none;}

	/*协议*/
	.xieyi{font-size: 13px;color:#999999;line-height: 30px;padding: 20px 0 ;box-sizing: border-box;align-items: center;justify-content: center;}
	.xieyi .sel-box{width: 16px;height: 16px;background: url(../../image/login/sel_0.png) no-repeat left center;background-size:16px;margin-right: 10px;}
	.xieyi .sel-box.on{background: url(../../image/login/sel_1.png) no-repeat left center;background-size:16px;}
	.xieyi span{color: #333333;}

</style>
</head>
<body>
	<div id="vue">

		<!--顶部-->
	    <div id="app-header" style="display:none;">
	        <div class="headbar">
	            <div class="toolbar">
	                <div class="lf tool" tapmode="tapcss" onclick="backMenu(this);"><span class="back"></span></div>
	                <div class="title han_1"><span id="title"></span></div>
	                <div class="rt tool menu" id="menu" tapmode="tapcss" onclick="menuClick(this);"></div>
	            </div>
	        </div>
	    </div>

		<div class="info-box flex inputarea">
			<div class="title">手机号绑定</div>
			<div class="info-one flex border-bottom">
				<div class="lf">手机号</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="11" oninput="inputFunction(this)" name="phone" placeholder="输入手机号">
				</div>
			</div>
			<div class="info-one flex border-bottom">
				<div class="lf">验证码</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="6" oninput="inputFunction(this)" name="code" placeholder="请输入您的验证码">
				</div>
				<div class="code" tapmode onclick="getCodeClick(this)">获取验证码</div>
			</div>
			<!-- <div class="info-one flex border-bottom">
				<div class="lf">邀请码</div>
				<div class="flex1 input-box">
					<input type="tel" maxlength="11" oninput="inputFunction(this)" name="yaoqing" placeholder="请输入邀请码，非必填">
				</div>
			</div> -->
			<!--登录按钮-->
			<div class="login-btn repeatbtn" tapmode onclick="bangClick()">完成</div>
			<!--同意协议-->
			<div class="xieyi flex">
				<div :class="['sel-box flex',seLxy ? 'on' : '']" tapmode onclick="seLxieyi(this)"></div>
				同意<span data-url="main3/fuwenben.html" data-type="Page/xieyi" data-title="平台用户使用协议" tapmode onclick="open_page(this)">《用户协议》</span>
				和<span data-url="main3/fuwenben.html" data-type="Page/yinsi" data-title="平台用户隐私协议" tapmode onclick="open_page(this)">《隐私协议》</span>
			</div>
			<div class="flex1"></div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/h-tool"></script>
<script type="text/javascript">
	define(function (require, exports, module) {

		pageParam = api.pageParam;
		lanYun.newVue('#vue', {
	        logintit : '登录',
	        seLxy:1,
			postdata:{},
	    },function(e) {

	    });

		//绑定手机号
		bangClick = function () {
			var pdata = {};
			pdata.phone = $('input[name="phone"]').val();
			pdata.code = $('input[name="code"]').val();
			pdata.oauth_id = pageParam.oauth_id;
			if(!TOOL.check.isMobile(pdata.phone)){
				lanYun.toast('请输入正确的手机号');
				return;
			}
			if(!pdata.code) {
				lanYun.toast('请输入短信验证码');
				return;
			}
			if(!lanYun.vue.seLxy){
				lanYun.toast('请阅读用户服务协议');
				return;
			}
			//console.log(JSON.stringify(pdata));
			lanYun.post('UserAuto/band', pdata ,function (ret) {
				//console.log(JSON.stringify(ret));
				if(ret.errcode == 0){
					lanYun.rmStorage('wait');
					lanYun.toast(ret.msg);
					lanYun.loginOk(ret.data);
					if(ret.isnew == 1){
						lanYun.openWin('login/yq_code.html', {
							win:'win',
							border:'1',
							menu:'跳过',
							frameParam :{},
						});
					}else {
						lanYun.event('toIndex');
					}
				}else{
					lanYun.toast(ret.msg);
				}
			},2);
		};

		//获取验证码
		getCodeClick = function (tis) {
			if($(tis).hasClass('on')){
				return;
			}
			var pm = {type : 'band'};
			pm.phone = $('input[name="phone"]').val();
			if(!TOOL.check.isMobile(pm.phone)){
				lanYun.toast('请输入正确的手机号');
				return;
			}
			lanYun.post('send/getcode', pm ,function (ret) {
				if(ret.errcode == 0){
					lanYun.toast(ret.msg);
					lanYun.setWait(tis);
				}else{
					lanYun.toast(ret.msg);
				}
			},2);
		};

		//输入事件
		inputFunction = function(e){
			e.value ? $(e).parent().addClass('on') : $(e).parent().removeClass('on');
			lanYun.vue.postdata[e.name] = e.value;
			if($('.inputarea').find('.input-box.on').length >= 2){
				$('.repeatbtn').addClass('on');
			}else{
				$('.repeatbtn').removeClass('on');
			}
		}

		//同意协议
		seLxieyi = function(){
			var seLxy = lanYun.vue.seLxy;
	        lanYun.vue.seLxy = seLxy ? 0 : 1;
		}

		//打开协议
		open_page = function (tis) {
			var dst = tis.dataset;
			lanYun.openWin(dst.url, {
				win:'win',
				title:dst.title,
				frameParam : dst
		   });
		}

	});
</script>
</html>
